<style type="text/css">
    #ball {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<div id="motion"></div>
<br>
<div id="rotation"></div>
<div id="degree"></div>
<div id="ball"></div>
<br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>
<img src='http://img03.taobaocdn.com/tps/i3/T1HJZkXjpaXXa6XtY7-490-170.png' id="img"/>

<script type="text/javascript">
    (function () {

        var ball = document.getElementById('ball');

        var motion = document.getElementById('motion');
        var rotation = document.getElementById('rotation');
        var degree = document.getElementById('degree');

        // Position Variables
        var x = 0;
        var y = 0;

        // Speed - Velocity
        var vx = 0;
        var vy = 0;

        // Acceleration
        var ax = 0;
        var ay = 0;
        var az = 0;
        var alpha2, beta2, gamma2;

        var delay = 10;
        var vMultiplier = 0.01;

        var alpha = 0,
                beta = 0,
                gamma = 0;

        var img = document.getElementById('img');


        if (window.DeviceMotionEvent == undefined) {
            document.write('does not support devicemotion');
            return;
        }

        window.ondevicemotion = function (event) {
            ax = event.accelerationIncludingGravity.x;
            ay = event.accelerationIncludingGravity.y;
            az = event.accelerationIncludingGravity.z;

            var rotationRate = event.rotationRate;

            alpha2 = rotationRate.alpha;
            beta2 = rotationRate.beta;
            gamma2 = rotationRate.gamma;

            motion.textContent = ("Accelerometer data - x: " +
                    ax +
                    " y: " + ay +
                    " z: " + az +
                    " alpha2: " + alpha2 +
                    " beta2: " + beta2 +
                    " gamma2: " + gamma2);
        };

        window.ondeviceorientation = function (event) {
            alpha = event.alpha;
            beta = event.beta;
            gamma = event.gamma;
            rotation.textContent = ("ondeviceorientation data - alpha: " +
                    alpha +
                    " beta: " + beta +
                    " gamma: " + gamma +
                    " absolute: " + event.absolute);
        };

        var useMotion = 0;
        if (location.href.indexOf('use-motion') > 0) {
            alert('use motion');
            useMotion = 1;
        } else {
            alert('use orientation');
            useMotion = 0;
        }

        setInterval(function () {
            vy = vy + -(ay);
            vx = vx + ax;


            y = parseInt(y + vy * vMultiplier);
            x = parseInt(x + vx * vMultiplier);

            if (x < 0) {
                x = 0;
                vx = 0;
            }
            if (y < 0) {
                y = 0;
                vy = 0;
            }
            if (x > document.documentElement.clientWidth - 20) {
                x = document.documentElement.clientWidth - 20;
                vx = 0;
            }
            if (y > document.documentElement.clientHeight - 20) {
                y = document.documentElement.clientHeight - 20;
                vy = 0;
            }

            ball.style.top = y + "px";
            ball.style.left = x + "px";


            // Z轴,可知设备朝上或者朝下
            var facingUp = -1;
            if (az > 0) {
                facingUp = +1;
            }

            var rotation, tiltLR, tiltFB;

            if (useMotion) {

                // 根据重力通过 acceleration.x|y 转换得到加速值,
                // 运用重力加速度9.81来计算得到一个百分比然后乘以转换角度90
                tiltLR = Math.round(((ax) / 9.81) * -90);
                tiltFB = Math.round(((ay + 9.81) / 9.81) * 90 * facingUp);


            } else {
                tiltLR = alpha;

                tiltFB = 90 - beta;

                // faceUp 变换瞬间，alpha 变化异常！
                if (false && facingUp > 0) {
                    tiltFB = -tiltFB;
                    tiltLR += 90;
                }
            }

            // 将2D和3D的转换应用到图片上
            rotation = "rotate(" + tiltLR + "deg)" +
                    " rotate3d(1,0,0, " + (tiltFB) + "deg)";
            degree.textContent = tiltLR + 'deg, ' + tiltFB + 'deg';
            img.style.webkitTransform = rotation;


        }, delay);
    })();
</script>